<template>
	<!-- 推广订单 -->
	<view class="content display width-100  displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">推广订单</text>
			</template>
		</u-navbar>
		<view class="content_all display  width-100 displayColumn">
			<view class="content_all_one display  width-100 M-T30 displaycenter_aliem" style="padding-left:30rpx ;">
				<view :class="{fn_item:selectTime!=index, display:true, fn_item1:selectTime==index,all_item:true,'M-L40':index!=0}" v-for="(item,index) in arr" :key="index" @click="selectTime=index">
					<text :class="{fontSize:true, font_comm:true, txt1:selectTime!=index,txt2:selectTime==index}">{{item}}</text>
				</view>
			</view>
			
			<!--订单数 -->
			<view class="orderNumber display  width-100 all_item M-T24">
				<view class="fn_order width_699  display displayColumn all_item">
					<view class="fn_order_top display  displaycenter_aliem">
						<view class="fn_left display  M-L24">
							<span class="fontSize font_comm">共</span>
							<span class="fontSize font_comm">1.266</span>
							<span class="fontSize font_comm">笔订单</span>
							
						</view>
						<view class="fn_right display  M-R24">
							
							<span class="fontSize font_comm">获得</span>
							<span class="fontSize font_comm">￥31.255</span>
							<span class="fontSize font_comm">元</span>
						</view>
					</view>
					<view class="fn_order_bottom display  width_699 M-T20">
						<view class="fn_order_bottom_left display  M-L24">
							<span class="fontSize font_comm">购买人：</span>
							<span class="fontSize font_comm">李*霸/138****8888</span>
						</view>
						<view class="fn_order_bottom_right display  M-R24">
							<span class="font_comm fontSize">获得佣金：</span>
							<span class="fontSize font_comm">￥5.6元</span>
						</view>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<scroll-view id="ceshi" scroll-y="true" class="scroll-Y" :style="{height: scrollHeight,marginTop:'20rpx'}">
							<view class="display fn_all  width-100 all_item displayColumn">
								<block v-for="(item,index) in 8" :key="index"><cardVue></cardVue></block>
							</view>
			</scroll-view>
			
			
		</view>
		
		
	</view>
</template>

<script>
	import cardVue from './card.vue'
	export default {
		components:{
			cardVue
		},
		data() {
			return {
				selectTime:0,
				arr:['全部','今日','近7天','近30天','近90天'],
				scrollHeight:'90vh'
			}
		},
		onReady() {
		      const that = this
		      this.$nextTick(() => {
		        uni.getSystemInfo({
		          success: function (res) {
		            const query = wx.createSelectorQuery()
		            query.select('#ceshi').boundingClientRect()
		            // 获取滚动容器css数据
		            query.exec((resData) => {
						console.log(resData)
		              if (resData && resData.length) {
		                // 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
		                that.scrollHeight = (res.windowHeight - resData[0].top)*2 - 30 + 'rpx'
						console.log(that.scrollHeight)
		              }
		            })
		          },
		        })
		      })
			},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">

.content{
	width: 100%;
	overflow: hidden;
	min-height:100vh;
}
.fn_item{
	width: 94rpx;
	height: 42rpx;
	background: #FFFFFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_item1{
	width: 94rpx;
	height: 42rpx;
	background: #126BC9;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.txt1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.txt2{
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.fn_order{
	width: 690rpx;
	height: 158rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	.fn_order_top{
		width: 690rpx;
		justify-content: space-between;
		.fn_left{
			// width: 100rpx;
			align-items: flex-end;
			flex-wrap: nowrap;
			:nth-child(1){
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
			}
			:nth-child(2){
				font-size: 40rpx;
				color: #126BC9;
				font-weight: 400;
			}
			:nth-child(3){
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
		.fn_right{
			// width: 690rpx;
			:nth-child(1){
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
			}
			:nth-child(2){
				font-size: 40rpx;
				color: #FF672D;
				font-weight: 400;
			}
			:nth-child(3){
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}
	.fn_order_bottom{
		
		justify-content: space-between;
		.fn_order_bottom_left{
			:nth-child(1){
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			:nth-child(2){
				font-weight: 400;
				font-size: 24rpx;
				color: #126BC9;
			}
		}
		.fn_order_bottom_right{
			:nth-child(1){
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			:nth-child(2){
				font-weight: 400;
				font-size: 24rpx;
				color: #FF672D;
			}
		}
	}
}
</style>
